<script lang="ts" setup>
import { onMounted, reactive, ref, computed } from 'vue';
import type { tagForm, pointForm } from '@/api/type';
import { addPoint, getPoint } from '@/api/point';
import { usePointStore } from '@/stores/point';

//获取知识点数据
let tableData = ref<pointForm[]>([]);
// tableData.value = usePointStore().pointDate;
const getTableDate = async () => {
    const res = await getPoint();
    usePointStore().setPoint(res.data);
    tableData.value = res.data
}
onMounted(() => {
    getTableDate();
})
// 输入name搜索知识点
const search = ref('')
const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            (data.name && data.name.toLowerCase().includes(search.value.toLowerCase()))
    )
)
import emitter from '@/utils/emitter';
// 选择的行
const currentRow = ref()
const CurrentChange = (val: pointForm | undefined) => {
    currentRow.value = val
    //这个事件在课程传递的使用过所以是cid
    emitter.emit('change-route',
        { routeName: 'pointRelation', cid: val?.id })
}
//获取标签数据
const tags = ref<tagForm[]>([]); //标签数据
tags.value = usePointStore().tag;
tableData.value.forEach((point) => {
    const tagId = point.tagId;
    const tag = tags.value.find((tag) => tag.id === tagId);
    if (tag) {
        point.tag = tag.name;
    }
});
// 搜索标签
var searchTag = ref('')
// 根据标签展示数据

// 控制抽屉
const dialogVisible = ref(false)
// 创建新知识点
import { ElMessage, ElMessageBox } from 'element-plus'
const pointDate = reactive<pointForm>({});
const createPoint = async () => {
    let res = await addPoint(pointDate);
    // console.log(pointDate.value);
    ElMessage.success("创建成功")
    dialogVisible.value = false;
    window.location.reload();
}
const handleDelete = (index: any) => {
    ElMessage("Number:", index)
}

</script>
<template>
    <div class="main">
        <el-card shadow="always" style="width: 95%;margin-top: 10px;">
            <el-form :inline="true" height="600px">
                <el-form-item> <el-button plain @click="dialogVisible = true">
                        创建新知识点
                    </el-button></el-form-item>
                <el-form-item label="标签" style="width: 50%;margin-left: 30px;">
                    <el-select v-model="searchTag" placeholder="Select">
                        <el-option v-for="tag in tags" :key="tag.id" :label="tag.name" :value="tag.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-table :data="filterTableData" stripe style="width: 100%;" max-height="500" highlight-current-row
                @current-change="CurrentChange">
                <!-- <template #default="scope"> -->
                <el-table-column label="序号" width="70">
                    <template v-slot="{ $index }">
                        {{ $index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="Name" width="170" />
                <el-table-column prop="introduction" label="Introduction" />
                <el-table-column prop="tag" label="Tag" width="150" />
                <el-table-column width="200">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="根据知识点名称搜寻" />
                    </template>
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleDelete(scope.$index)">
                            Remove
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog v-model="dialogVisible" title="创建新的知识点" width="500">
            <el-form label-width="100px">
                <el-form-item label="知识点名称">
                    <el-input v-model="pointDate.name"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="pointDate.introduction" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="标签">
                    <el-select v-model="pointDate.tagId" placeholder="Select">
                        <el-option v-for="tag in tags" :key="tag.id" :label="tag.name" :value="tag.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="createPoint">
                        确认创建
                    </el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>
.main {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
</style>
